<template>
    <div class="car">
        <el-card >
            <div style="display: flex;flex-direction: column;justify-content: space-around;align-items: center;margin-bottom: 50px">
                <div style="margin-top: 25px;width: 100%;display: flex;flex-direction: row;justify-content: space-around">
                    <div>
                        <label>用户:</label>
                        <el-select v-model="searchDTO.userId" :value="searchDTO.userId" clearable @change="initData">
                            <el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" @click="addPlateNum">新增车牌</el-button>
                </div>
            </div>
            <el-table
                    :header-cell-style="tableHeader"
                    :data="plateData"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="用户"
                        min-width="280">
                    <template slot-scope="scope">
                        <span>{{scope.row.userId | UserFilter}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="plateNum"
                        align="center"
                        label="车牌号"
                        min-width="280">
                </el-table-column>
                <el-table-column
                        prop="status"
                        align="center"
                        label="车辆状态"
                        width="280">
                </el-table-column>
                <el-table-column
                        align="right"
                        width="280px">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="searchDTO.plateNum"
                                size="mini"
                                placeholder="输入车牌号搜索"
                                @blur="initData"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-search"
                                size="mini"
                                @click="handleShow(scope.row)"></el-button>
                        <el-button
                                icon="el-icon-edit"
                                size="mini"
                                @click="handleEdit(scope.row)"></el-button>
                        <el-button
                                icon="el-icon-share"
                                size="mini"
                                @click="handleBind(scope.row)"></el-button>
                        <el-button
                                icon="el-icon-delete"
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 20px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchDTO.page"
                    :page-sizes="[10, 15, 20, 30]"
                    :page-size="searchDTO.rows"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="searchDTO.total">
            </el-pagination>
        </el-card>
        <el-dialog :title="plateTitle"
                   :visible.sync="addPlateVisible"
                   width="30%">
            <el-form :model="plateForm" label-width="10%" :rules="rules" :ref="plateForm">
                <el-form-item label="用户:" prop="plateNum">
                    <el-select v-model="plateForm.userId">
                        <el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车牌:" prop="plateNum">
                    <el-input v-model="plateForm.plateNum" >
                        <template slot="append">
                            <el-button @click="addPlate">确认</el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :title="title"
                   :visible.sync="dialogVisible"
                   width="30%"
                   :before-close="handleClose">
            <el-alert :closable="false" type="warning" title="车牌信息" style="margin: 5px 0"></el-alert>
            <div style="width: 100%;height: 80px;display: flex;flex-direction: row">
                <el-card style="width: 100%">
                    <el-row :gutter="20">
                        <el-col :span="3" v-for="(item,index) in carPlate" :key="index">
                            <input disabled="true" class="input-style" maxlength=1 v-model="carPlate[index]"/>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
            <el-alert :closable="false" type="success" title="车辆信息" style="margin: 5px 0"></el-alert>
            <el-card>
                <el-form :model="carInfo">
                    <el-form-item label="车辆类型">
                        <el-select :value="carInfo.carSize" :disabled="!isEdit" v-model="carInfo.carSize" placeholder="请选择">
                            <el-option
                                    v-for="item in carSizeOptions"
                                    :key="item.id"
                                    :label="item.valueDesc"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆图片">
                        <upload-img :disabled="!isEdit" v-model="carInfo.carPic"></upload-img>
                    </el-form-item>
                    <el-form-item label="车辆属性">
                        <el-tag
                                v-for="tag in tags"
                                :key="tag.name"
                                :closable="isEdit"
                                :type="tag.type"
                                @close="closeTag(tag)">
                            {{tag.name}}
                        </el-tag>
                        <el-input
                                class="input-new-tag"
                                v-if="inputVisible"
                                v-model="inputValue"
                                ref="saveTagInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm"
                                @blur="handleInputConfirm"
                                :disabled="!isEdit"
                        >
                        </el-input>
                        <el-button :disabled="!isEdit" class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                    </el-form-item>
                    <template>
                        <el-form-item v-show="isEdit" align="right">
                            <el-button type="primary" @click="savePlate">确认</el-button>
                        </el-form-item>
                    </template>
                </el-form>
            </el-card>

        </el-dialog>
    </div>
</template>

<script>
  import Message from '../../components/messages/index'
  import UploadImg from '../../components/upload/UploadImg.vue'
  import Filter from '../../utils/filter'
  export default {
    name: "Car",
    data(){
      return{
        rules:{
          plateNum:[
            { required: true, message: '请输入车牌号',trigger: 'blur' },
            { min: 7, max: 8, message: '长度在 7 到 8 个字符', trigger: 'change' }
          ],
        },
        tableHeader:{
          "background-color":"#7fa1be99",
          "color":"white",
          "font-size":"18px"
        },
        plateTitle:"新增车牌",
        addPlateVisible:false,
        user:JSON.parse(localStorage.getItem("user")),
        userList:JSON.parse(localStorage.getItem("users")),
        title:"",
        carPlate:[],
        dialogVisible:false,
        plateData:[],
        searchDTO:{
          page:1,
          rows:10,
          plateNum:"",
          total:0,
          userId:""
        },
        plateForm:{},
        carInfo:{
          plateNum:"",
          carSize:"",
          carDesc:"",
          carPic:""
        },
        tags: [],
        type:["success","info","danger","danger",""],
        inputVisible:false,
        inputValue:"",
        isEdit:false,
        carSizeOptions:[],
        userId:""
      }
    },
    components:{
      UploadImg
    },
    methods:{
      initData(){
        this.$http.post("/userPlateBind/page",{
          pageSize:this.searchDTO.rows,
          pageNum:this.searchDTO.page,
          clauses:[
            {
              column:"userId",
              operation:"=",
              value:this.searchDTO.userId
            },
            {
              column:"plateNum",
              operation:"like",
              value:this.searchDTO.plateNum
            }
          ]
        }).then(res=>{
          if (res.status===200){
            this.plateData = res.data.list;
            this.searchDTO.total = res.data.total;
          }
        })
      },
      handleClose(){
        this.plateForm = {};
        this.dialogVisible = false;
      },
      //查看车牌信息
      handleShow(data){
        let _this = this;
        _this.getOptionsByCode("carSize");
        _this.isEdit = false;
        _this.carPlate =  data.plateNum.split('');
        _this.title = "查看车牌信息";
        _this.dialogVisible = true;
        _this.plateForm = data;
        if (_this.plateForm.id!=null){
          _this.$http.get("/carInfo/get/"+_this.plateForm.plateNum).then(res=>{
            if (res.status===200){
              if (res.data === ""){
                _this.carInfo = {
                  plateNum:"",
                  carSize:"",
                  carDesc:"",
                  carPic:""
                };
              }else{
                _this.carInfo = res.data;
              }
              if (_this.carInfo.carDesc == null || _this.carInfo.carDesc === ""){
                _this.tags = [];
              } else{
                _this.tags = JSON.parse(_this.carInfo.carDesc)
              }
            }
          })
        }
      },
      //修改车牌信息
      handleEdit(data){
        this.plateTitle = "修改车牌";
        this.addPlateVisible = true;
        this.plateForm = data;
      },
      //绑定车辆信息
      handleBind(data){
        let _this = this;
        _this.getOptionsByCode("carSize");
        _this.isEdit = true;
        _this.carPlate =  data.plateNum.split('');
        _this.title = "绑定车牌信息";
        _this.dialogVisible = true;
        _this.plateForm = data;
        if (_this.plateForm.id!=null){
          _this.$http.get("/carInfo/get/"+_this.plateForm.plateNum).then(res=>{
            if (res.status===200){
              if (res.data === ""){
                _this.carInfo = {
                  plateNum:"",
                  carSize:"",
                  carDesc:"",
                  carPic:""
                };
              }else{
                _this.carInfo = res.data;
              }
              if (_this.carInfo.carDesc === "" || _this.carInfo.carDesc==null){
                _this.tags = [];
              } else{
                _this.tags = JSON.parse(_this.carInfo.carDesc)
              }
            }
          })
        }
      },
      //删除绑定车牌
      handleDelete(data){
        Message.confirm("确认删除该车牌？").then(()=>{
          this.$http.get("/userPlateBind/delete/"+data.id).then(res=>{
            if (res.status === 200){
              this.$http.get("carInfo/get/"+data.plateNum).then(res=>{
                if (res.status===200){
                  if (res.data!==""){
                    this.$http.get("carInfo/delete/"+data.plateNum).then(res=>{
                    })
                  }
                }
              });
              Message.success("删除成功");
              this.initData();
            }
          })
        })
      },
      handleSizeChange(val){
        this.searchDTO.rows = val;
        this.initData();
      },
      handleCurrentChange(val){
        this.searchDTO.page = val;
        this.initData();
      },
      savePlate(){
        console.log(this.carInfo);
        if (this.carInfo.plateNum==null || this.carInfo.plateNum=== ""){
          this.carInfo.plateNum =  this.carPlate.join("");
          this.$http.post("/carInfo/add",this.carInfo).then(res=>{
            if (res.status===200){
              Message.success("新增车辆信息成功");
              this.dialogVisible = false;
            }
          })
        }else{
          this.$http.post("/carInfo/update",this.carInfo).then(res=>{
            if (res.status===200){
              Message.success("修改车辆信息成功");
              this.dialogVisible = false;
            }
          })
        }
      },
      closeTag(tag) {
        this.tags.splice(this.tags.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          let tag = {
            name:inputValue,
            type:this.type[Math.floor(Math.random()*this.type.length)]
          };
          this.tags.push(tag);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      addPlateNum(){
        this.plateTitle = "新增车牌";
        this.addPlateVisible = true;
        this.plateForm = {}
      },
      addPlate(){
        if(this.plateForm.id==null){
          this.$http.post("/userPlateBind/add",{
            userId:this.plateForm.userId,
            plateNum:this.plateForm.plateNum
          }).then(res=>{
            if (res.status===200){
              Message.success("新增成功");
              this.initData();
              this.addPlateVisible = false;
            }
          })
        }else{
          this.$http.post("/userPlateBind/update",this.plateForm).then(res=>{
            if (res.status===200){
              Message.success("新增成功");
              this.initData();
              this.addPlateVisible = false;
            }
          })
        }
      },
      getOptionsByCode(data){
        let _this = this;
        _this.$http.get("/coder/getOptionsByCode/"+data).then(res=>{
          if (res.status===200){
            _this.carSizeOptions = res.data;
          }
        })
      }


    },
    mounted(){
      this.initData();
    },
    filters:{
      UserFilter:function (data) {
        return Filter.UserNameFilter(data)
      }
    },
    watch:{
      "tags":function (val) {
        this.carInfo.carDesc = JSON.stringify(val)
      }
    }
  }
</script>

<style scoped lang="less">
    .car{
        width: 100%;
        height: calc(~'100vh - 100px');
        .input-style{
            padding: 0;
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            -webkit-appearance: none;
            background-color: #FFF;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            outline: 0;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            width: 100%;
        }
        .button-style{
            padding: 5px;
        }
        .el-tag + .el-tag {
            margin-left: 10px;
        }
        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
    }
</style>